<!--
  折叠面板组件
  wdz
  2019年12月10日
-->
<template lang="pug">
  div.forum-content-box
    div.btn-box.clearfix
      span.posting(@click="post") 发帖
      span(v-if="isChoose === '我的发表'")
        span.toggle(:class="{'active':isPost==1}" @click="myPost") 我的帖子
        span |
        span.toggle(:class="{'active':isPost==2}" @click="myReply") 我的回复
        <!--el-select.categorize(v-model="value" placeholder="请选择主题分类")-->
          <!--el-option(v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled")-->
</template>
<script>
  export default {
    name: 'ForumList',
    props: {
      isChoose: String
    },
    data() {
      return {
        isPost: 1
        // options: [{
        //   value: '全部分类',
        //   label: '全部分类'
        // }, {
        //   value: '官方公告',
        //   label: '官方公告'
        // }, {
        //   value: '文学地带',
        //   label: '文学地带',
        //   disabled: true
        // }, {
        //   value: '学术讨论',
        //   label: '学术讨论'
        // }, {
        //   value: '灌水乐园',
        //   label: '灌水乐园'
        // }],
        // value: ''
      }
    },
    methods: {
      // 我的帖子点击事件
      myPost() {
        this.isPost = 1
        this.$emit('myPost')
      },
      // 我的回复点击事件
      myReply() {
        this.isPost = 2
        this.$emit('myReply')
      },
      // 发帖按钮点击跳转发帖页面
      post() {
        this.$router.push({path: '/forum/post'})
      }
    }
  }
</script>

<style scoped lang="stylus">
  .forum-content-box
    display inline-block
    vertical-align top
    .btn-box
      line-height 28px
      span
        display inline-block
        margin-right 10px
      .posting
        width 74px
        height 28px
        text-align center
        line-height 28px
        color #fff
        background-color #25a9e1
        border-radius 5px
        cursor pointer
      .toggle
        cursor pointer
      .posting:hover
        opacity 0.6
      .toggle:hover
        color #25a9e1
  .active
    color #25a9e1
</style>

<style lang="stylus">
  .categorize
    float right
    height 28px
  .categorize .el-input__inner
    border-color #ccc
    height 28px
    line-height 28px
  .categorize .el-input .el-select__caret
    height 28px
    line-height 28px
    color #333
</style>
